<template>
  <div>
      <div class="model fl"  v-for="(model, index) in models" :key="model.index"  @click="showDetail(index)">
        <p class="title_color" style="height: 40px;">
          <span class="condition">{{model.name}}</span>
          <img :src="model.src" alt="" class="zan">
        </p>
        <div class="fl tc"  v-for="link in model.link" :key="link.index" :class="link.class">
           <p :class="link.class1">{{link.time}}</p>
           <p>{{link.ranking}}</p>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    models: {
      default: ''
    }
  },
  data () {
    return {
    }
  },
  methods: {
    showDetail: function (index) {
      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/ranking?type=' + (index + 8))
    }
  }
}
</script>

<style scoped>
  /*模块*/
  .main_right .model{
    width: 24%;
    background: -webkit-linear-gradient(top, #FFE5C3 ,#FDDEFF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(top, #FFE5C3, #FDDEFF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(top, #FFE5C3, #FDDEFF); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #FFE5C3 , #FDDEFF);
    margin: 1% 1% 0 0;
    padding: 20px;
    border-radius: 5px;
  }
  .model div{
    margin-top: 40px;
    line-height: 25px;
  }
  /*点赞*/
  .zan{
    margin-top: -3px;
    width: 20px;
    float: right;
  }
  /*模块悬浮颜色*/
  .model:hover{
    background-color:#cfe4f8 ;
  }
  .condition{
    display: inline-block;
  }
</style>
